<template>
  <div class="admin-home-head" v-if="runloading">
    <div
      class="left"
      @mouseenter="isexithover = true"
      @mouseleave="isexithover = false"
    >
      <div class="title-img-div">
        <img v-show="!isexithover" :src="exit" alt="" />
        <img v-show="isexithover" :src="exitActive" alt="" />
      </div>

      <div class="visit-item">
        <h2>活跃用户</h2>
        <!-- <animate-number from="1" :to="visits"></animate-number> -->
        <runing-num :runnum="userlength"></runing-num>
        <!-- <span>{{visits}}</span> -->
      </div>
    </div>
    <div
      class="center"
      @mouseenter="iscenterhover = true"
      @mouseleave="iscenterhover = false"
    >
      <div class="title-img-div">
        <img v-show="!iscenterhover" :src="incenter" alt="" />
        <img v-show="iscenterhover" :src="centerActive" alt="" />
      </div>
      <!-- <img v-show="!iscenterhover" :src="incenter" alt="" />
      <img v-show="iscenterhover" :src="centerActive" alt="" /> -->
      <div class="visit-item">
        <h2>总收入</h2>
        <runing-num :runnum="totalrevenue"></runing-num>
        <!-- <span>{{goodnumber}}</span> -->
      </div>
    </div>
    <div
      class="right"
      id="entermessage"
      @mouseenter="ismesshover = true"
      @mouseleave="ismesshover = false"
    >
      <div class="title-img-div">
        <img v-show="!ismesshover" :src="inmess" alt="" />
        <img v-show="ismesshover" :src="messActive" alt="" />
      </div>

      <div class="visit-item">
        <h2>用户意见</h2>
        <!-- <span>{{ismessagenum}}</span> -->
        <runing-num :runnum="ismessagenum"></runing-num>
      </div>
    </div>
    <div class="loginitem">
      <div class="title-img-div">
        <img src="http://192.168.2.27:8888/assets/adminhome/add.png" alt="" />
        <!-- <img v-show="ismesshover" :src="messActive" alt="" /> -->
      </div>

      <div class="visit-item">
        <h2>今日登录</h2>
        <runing-num :runnum="todaylog"></runing-num>
      </div>
    </div>
  </div>
  <!-- <div v-else style="width: 100%;height:130px;"></div> -->
</template>

<script>
import { getuserlen, getusermessage, getorder } from "network/request.js";
import RuningNum from "./RuningNumView.vue";
export default {
  props: {
    todaylog: {
      type: Number,
      default: 0,
    },
  },
  components: {
    RuningNum,
  },
  data() {
    return {
      visits: 8888,
      totalrevenue: 0,
      ismessagenum: 0,
      isexithover: false,
      exit: require("assets/adminhome/frieacitve.png"),
      exitActive: require("assets/adminhome/frieacitve.png"),

      iscenterhover: false,
      incenter: require("assets/adminhome/good.png"),
      centerActive: require("assets/adminhome/goodactive.png"),

      ismesshover: false,
      inmess: require("assets/adminhome/message.png"),
      messActive: require("assets/adminhome/messageactive.png"),

      userlength: 0,
      runloading: true,
    };
  },
  async created() {
    this.runloading = false;
    await getuserlen().then(({ data: res }) => {
      this.userlength = res.length;
    });
    await getusermessage().then(({ data: res }) => {
      this.ismessagenum = res.length;
    });
    await getorder().then(({ data: res }) => {
      // console.log(res)
      res.forEach((item) => {
        if (item.staus != "已退款") {
          this.totalrevenue += parseInt(item.total);
        }
      });
      this.runloading = true;
    });
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
img {
  border-radius: 8px;
  vertical-align: top;
}
.admin-home-head {
  margin: 20px auto;
  display: flex;
  width: 100%;
  /* background-color: #fff; */
  justify-content: space-between;
}
.admin-home-head > div {
  box-sizing: border-box;
  width: 24%;
  display: inline-block;
  height: 130px;
  display: flex;
  // margin-right: 3%;
  color: #000;
  justify-content: space-around;
  transform-origin: center;
  transition: 0.4s linear;
}
.admin-home-head > div:last-child {
  margin-right: 0;
}
.title-img-div {
  width: 100px;
  height: 100px;
  /* background-color: yellow; */
  margin: auto 0;
  position: relative;
  transform-origin: center;
  transition: 0.5s linear;
}
.title-img-div > img {
  width: 80%;
  height: 70%;
  /* background-color: red; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* .admin-home-head > div img {
  margin-left: 1rem;
  margin-right: 1.5rem;
  margin-top: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 5px;
} */
.left {
  box-sizing: border-box;
  background-image: linear-gradient(45deg, #f7aba2, rgb(220, 53, 71));
}
.center {
  box-sizing: border-box;
  background-color: #fff;
}
.right {
  box-sizing: border-box;
  background-color: #fff;
}
.loginitem {
  background-color: rgb(254, 193, 6);
  margin-right: 0;
  border-radius: 8px;
  .visit-item {
    h2 {
      color: white;
    }
  }
}
.visit-item {
  /* background-color: yellow; */
  /* float: right; */
  width: 200px;
  text-align: right;
}

.visit-item > h2 {
  margin-top: 10%;
  margin-right: 10%;
  letter-spacing: 2px;
  font-size: 20px;
  color: rgb(160, 159, 159);
}
.admin-home-head > div:nth-child(2):hover {
  background-color: rgb(23, 163, 184);
  color: white;
  border-radius: 8px;
  box-shadow: 3px 3px 20px #aaa;
}
.admin-home-head > div:nth-child(3):hover {
  background-color: #24a843;
  color: white;
  border-radius: 8px;
  box-shadow: 3px 3px 20px #aaa;
}

.admin-home-head > .center:hover .visit-item h2 {
  color: #fff;
}
.admin-home-head > .right:hover .visit-item h2 {
  color: #fff;
}
.left .visit-item > h2 {
  color: white;
}
.left .visit-item > span {
  color: white;
}
.visit-item span {
  /* background-color: green; */
  display: inline-block;
  /* width: 100%; */
  letter-spacing: 2px;
  margin-top: 10%;
  margin-right: 10%;
  font-size: 40px;
  font-weight: 700;
  /* text-align: center; */
}
@media screen and (max-width: 768px) {
  .admin-home-head {
    flex-direction: column;
    justify-content: none;
  }
  .admin-home-head > div {
    width: 90%;
    margin: 0 auto 10px auto;
  }
}
</style>